<template>
  <div class="insert-scheme-form">
    <el-form label-width="100px" ref="formRef" :model="submitForm" :rules="rules" status-icon show-message>
      <el-form-item label="方案名称" prop="schemeName" >
        <el-input  v-model="submitForm.schemeName" placeholder="请输入方案名称" :maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="方案类型" prop="schemeType">
        <el-radio-group v-model="submitForm.schemeType" size="default" fill="#222A42">
          <el-radio-button :label="SchemeType.EXERCISE" >练习</el-radio-button>
          <el-radio-button :label="SchemeType.TEST" >测验</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="方案描述"  prop="description" >
        <el-input :rows="4"
                  type="textarea"
                  :maxlength="30"
                  placeholder="请输入方案描述"
                  show-word-limit
                  v-model="submitForm.description" resize="none"></el-input>
      </el-form-item >


      <el-form-item label="方案封面">
        <el-dialog v-model="showImageUpload" :width="computedSizeByIsPc">
          <image-upload :url="uploadImageUrl"  @upload="handleImageSubmit" :auto-upload="true"></image-upload>
        </el-dialog>
        <div class="flex-col-center-start">
          <div style="width: 70px;height: 70px;border: 2px solid var(--theme-dark-color);border-radius: 5px;overflow: hidden"
               v-show="submitForm.imagesrc && submitForm.imagesrc !== ''">
            <y-image :src="submitForm.imagesrc" ></y-image>
<!--            <y-image src="http://localhost:82/dev/file/download?id=1758788534502608898" ></y-image>&ndash;&gt;-->

          </div>
          <el-button  class="margin-col-10"
                      size="small"
                      color="#222A42" dark
                      :icon="Cloudy"
                      @click="showImageUpload=true">点击上传</el-button>
        </div>
      </el-form-item>

      <el-form-item label="更多设置">
        <el-button size="small"
                   :color="sysConfig.DARK_COLOR"
                   dark :icon="ArrowDownBold"
                   @click="handleClickShowMore">{{computeShowMoreText}}</el-button>
      </el-form-item>
      <el-form-item v-show="showMoreFormItem" label="适用年龄">
        <div class="flex-col-center-start">
          <div>
            <span class="margin-row-5">最小年龄</span>
            <el-input-number size="small" v-model="submitForm.minAge" :min="0" :max="99"  />
          </div>
          <div class="margin-col-5">
            <span class="margin-row-5">最大年龄</span>
            <el-input-number size="small" v-model="submitForm.maxAge" :min="0" :max="100"  />
          </div>
        </div>
      </el-form-item>

      <el-form-item v-show="showMoreFormItem" label="方案价格">
        <el-input-number size="small" v-model="submitForm.price" :min="0" :max="100000000"  />
        <el-text size="small">( 免费即为0 )</el-text>
      </el-form-item>

      <el-form-item>
        <div class="flex-row-center width-100-percent">
          <el-button @click="handleFormSubmit"
                     :loading="showBtnLoading"
                     color="#222A42"
                     dark
                     class="width-80-percent">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, defineEmits, defineProps, watch, reactive} from "vue";
import {Scheme, SchemeType} from "@/ts/scheme";
import {ArrowDownBold,  Cloudy} from "@element-plus/icons";
import ImageUpload from "@/components/upload/ImageUpload.vue";
import YImage from "@/components/img/YImage.vue";
import {isPC} from "@/utils/CommonUtil";
import {addScheme, updateScheme} from "@/api/scheme/SchemeApi";
import {ElMessage, FormInstance, FormRules} from "element-plus";

import sysConfig from "@/config/index"

export interface InsertSchemeFormType{
  id:number,
  schemeName:string,
  schemeType:SchemeType,
  description:string,
  imagesrc:string,
  minAge:number,
  maxAge:number,
  price:number
}
 interface RuleForm{
    schemeName:string,
   description:string,
    schemeType:string
 }

// id = 0 代表为修改表,否则新增表
let props=defineProps<{
  form?:InsertSchemeFormType
}>()
let emit=defineEmits<{
  (e:"submit",form:InsertSchemeFormType):void
}>()
let uploadImageUrl=ref(sysConfig.UPLOAD_iMAGE_URL)
let showBtnLoading=ref(false)
let formRef=ref<FormInstance>()
let submitForm=ref<InsertSchemeFormType>({
  id:0,
  schemeName:"",
  schemeType:SchemeType.EXERCISE,
  description:"",
  imagesrc:"",
  minAge:0,
  maxAge:0,
  price:0
})


const rules=reactive<FormRules<RuleForm>>({
  schemeName: [
    { required: true, message: '请输入方案名', trigger: 'blur' },
    { min: 1, max: 20, message: '方案名长度限制:1~20', trigger: 'blur' },
  ],
  schemeType: [
    {
      type: 'string',
      required: true,
      message: '请选择类型',
      trigger: 'blur',
    },
  ],
  description: [
    { required: true, message: '请输入方案描述', trigger: 'blur' },
    { min: 1, max: 30, message: '方案描述长度限制:1~30', trigger: 'blur' },
  ],
})

let showTollgateForm=ref(false)
let showImageUpload=ref(false)
let showMoreFormItem=ref(false)
function handleImageSubmit(url:string){

  submitForm.value.imagesrc=url
  console.log(submitForm.value.imagesrc)
  showImageUpload.value=false
}
function handleClickShowMore(){
  showMoreFormItem.value=!showMoreFormItem.value
}


function handleFormSubmit(){

  if(!formRef.value){
    return
  }
  formRef.value?.validate(async result => {
    // 表单验证通过
    if (result) {

      showBtnLoading.value = true
      let scheme: Scheme = {
        ...submitForm.value
      }
      if (submitForm.value.id === 0) {

        addScheme(scheme).then(resp => {
          if(resp.code === 200){
            ElMessage({
              type: "success",
              message: "添加方案成功"
            })
          }
          showBtnLoading.value = false
          emit("submit", submitForm.value)
        })
      } else {
        updateScheme(scheme).then((resp) => {
          if(resp.code === 200){
            ElMessage({
              type: "success",
              message: "修改方案成功"
            })
          }
          showBtnLoading.value = false
          emit("submit", submitForm.value)
        })
      }

    }
  })

}
function initForm(){
  submitForm.value={
    id:0,
    schemeName:"",
    schemeType:SchemeType.EXERCISE,
    description:"",
    imagesrc:"",
    minAge:0,
    maxAge:0,
    price:0
  }
}
let computeShowMoreText=computed(()=>{
  return showMoreFormItem.value?'点击收起':'点击展开'
})
let computedSizeByIsPc=computed(()=>{
  return isPC()?'50%':'100%'
})
watch(()=>props.form,(newV)=>{

  if(newV && newV.id !== 0){
    submitForm.value=newV
  }else {
    initForm()
  }

},{immediate:true,deep:true})
</script>

<style scoped lang="less">
  .insert-scheme-form{

  }
</style>